<template>
  <div class="page-box">
    <div class="safe_area">
      <div class="left">
        <div class="blog_title whites">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: `/article/${state.blogId}` }">博客详情</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/' }" style="cursor: pointer">返回上一页</el-breadcrumb-item>
          </el-breadcrumb>
          <h1 class="title mb20 mt20">{{ state.article.title }}</h1>
          <div class="info">
            <img
              src="https://img.pinkyang.cn/2022.07.09-4403.jpg"
              style="height: 50px; border-radius: 50%; transform: translateY(2px)"
            />
            <div class="user">
              <span>{{ state.article.author }}</span>
              <time>{{ state.article.createdAt }}</time>
            </div>
          </div>
          <div class="update-text" v-if="state.flag" @click="updateDetails">修改</div>
        </div>
        <div class="blog_content whites">
          <div v-if="!state.content" class="loading">
            <Loading2 />
            <p class="loading-text">加载中...</p>
          </div>
          <MdViewer v-else :value="state.content" />
        </div>
      </div>
      <!-- <div class="blog_comment whites">
          <div class="mb20 commentbtns">
            <el-input
              class="mb10"
              maxlength="40"
              v-model="state.remake"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="友善的评论会发光哦"
            />
            <div class="btn">
              <el-button class="btns" type="success" @click="handleComment">评论</el-button>
            </div>
          </div>
          <div class="list">
            <Comment :remake="item" v-for="item in state.commentList" :key="item.id" />
          </div>
        </div>
      </div> -->
      <div class="menu">
        <el-affix :offset="20">
          <div class="tree">
            <h3 class="directory">目录</h3>
            <el-divider style="margin: 10px 0" />
            <ul class="menu_content">
              <li v-for="(item, key) of cata.menuData" :key="key" :style="menuStyle(item.type)">
                <!-- <a :class="cata.menuState === item.txt ? `tree_list active` : `tree_list`" :href="'#' + item.point"> -->
                <a :class="cata.menuState === item.txt ? `tree_list active` : `tree_list`" @click="goAnchor(`#${item.point}`)">
                  {{ item.txt }}
                </a>
              </li>
            </ul>
          </div>
        </el-affix>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { getBlogDetails, getComment, addComment } from "@/api";
import { detailBlogApi } from "@/api/modules/article";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ArrowRight } from "@element-plus/icons-vue";
import MdViewer from "@/components/MdViewer/index.vue";
import Loading2 from "@/components/Loading2/index.vue";

interface Menu {
  type: string;
  txt: string;
  offsetTop: number;
  point: string;
}

const route = useRoute();
const router = useRouter();

const state = reactive({
  remake: <string>"",
  content: <any>``,
  blogId: <number>0,
  commentList: <any[]>[],
  article: <{ title: string; createdAt: string; author: string }>{},
  flag: <boolean>false
});

const cata = reactive({
  menuData: <Menu[]>[],
  menuState: ""
});

onMounted(async () => {
  // let userInfo = localStorage.getItem("BigYangBlog_userinfo");

  // if (userInfo) {
  //   console.log("userInfo");
  //   let user = JSON.parse(userInfo);
  //   state.flag = user?.id ? true : false;
  // }
  let id = route.query.id;
  const res: any = await detailBlogApi({ id });
  if (res.code === "200") {
    state.content = res.data.content;
    state.article = {
      title: res.data.title,
      author: "刘维",
      createdAt: "2023-012-12"
    };
  }
  // _gainComment();
  componentDidMount();
  window.addEventListener("scroll", onScroll, true);
});

/**
 * h1 h2 h3 h4 标签样式
 * @param type
 */
const menuStyle = (type: string) => {
  let style = {};
  if (type === "H2") style = { "padding-left": 10 + "px" };
  if (type === "H3") style = { "padding-left": 20 + "px" };
  if (type === "H4") style = { "padding-left": 30 + "px" };

  return style;
};

// 重新实现目录的定位
const componentDidMount = () => {
  nextTick(() => {
    getElement(["H1", "H2", "H3", "H4"]);
  });
};

/**
 * 获取标题锚点
 * 参数nodeArr 表示需要解析目录内容的标题
 */
const getElement = (nodeArr: string[]) => {
  let nodeInfo: Menu[] = [];
  const dom: any = document.querySelector(".markdown-body");
  // console.log(dom.childNodes)
  dom.childNodes.forEach((item: any, key: number) => {
    // console.log(item.nodeName)
    if (nodeArr.includes(item.nodeName)) {
      nodeInfo.push({
        type: item.nodeName,
        txt: item.innerText,
        offsetTop: item.offsetTop,
        point: `target_${key}`
      });
      item.setAttribute("id", `target_${key}`);
      console.log(item);
    }
  });

  cata.menuData = nodeInfo;
  cata.menuState = nodeInfo[0].txt;
  console.log("nodeInfo", nodeInfo);
};

const goAnchor = (selector: any) => {
  // 移动距离
  let top = 0;
  // 当前滚动条位置
  const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  // 若为指定距离
  if (typeof selector === "number") {
    top = selector - scrollTop;
  } else {
    const anchor = document.querySelector(selector) || { offsetTop: 0 };
    top = anchor.offsetTop - scrollTop;
  }
  // const nav = document.querySelector(".pc-nav2") || { offsetHeight: 0 };
  // top = top - nav.offsetHeight;
  window.scrollBy({ top, behavior: "smooth" });
};

/**
 * 监听页面开始滚动
 */
const onScroll = (e: any) => {
  // 当前页面滚动的距离
  let scrollTop = e.target.documentElement.scrollTop || e.target.body.scrollTop;
  // console.log(scrollTop)
  // windowHeight 可视区的高度
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  // scrollHeight 滚动条的总高度
  let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  let currentmenu = cata.menuData[0].txt; // 设置menuState对象默认值第一个标题
  for (let item of cata.menuData) {
    // console.log(item.offsetTop);

    if (scrollTop >= item.offsetTop - 30) {
      currentmenu = item.txt;
    } else break;
  }

  if (currentmenu !== cata.menuState) {
    cata.menuState = currentmenu;
  }

  // 如果到底部，就命中最后一个标题
  if (Math.floor(scrollTop + windowHeight) === scrollHeight) {
    console.log("滚动到底部了");
    cata.menuState = cata.menuData[cata.menuData.length - 1].txt;
  }
};

/**
 * 修改详情
 */
const updateDetails = () => {
  console.log(state.article);
  console.log("内容", state.content);
  router.push(`/admin/${state.blogId}`);
};

// const _gainComment = async () => {
//   const { data, code, message } = await getComment({ blogid: state.blogId });

//   if (code === 200) {
//     state.commentList = data;
//   }

//   if (message) {
//     ElMessage.error(message);
//   }
// };

// const handleComment = async () => {
//   if (!state.remake) {
//     ElMessage.warning("请输入评论内容！");
//     return;
//   }

//   let avatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
//     nickname = "默认昵称";
//   const { data, message, code } = await addComment({
//     nickname,
//     content: state.remake,
//     blogid: state.blogId,
//     avatar
//   });

//   if (code === 200) {
//     ElMessage.success("评论成功...");
//     state.remake = "";
//     setTimeout(() => {
//       _gainComment();
//     }, 500);
//   }
// };
</script>

<style scoped lang="scss">
@mixin font-set($size: false, $color: false, $weight: false, $lh: false) {
  @if $size {
    font-size: $size;
  }

  @if $color {
    color: $color;
  }

  @if $weight {
    font-weight: $weight;
  }

  @if $lh {
    line-height: $lh;
  }
}

@mixin flex-auto($al: false, $jc: false, $row: row) {
  display: flex;
  flex-direction: $row;

  @if  $al {
    align-items: $al;
  }

  @if  $jc {
    justify-content: $jc;
  }
}
.page-box {
  background-color: #f4f4f4;
}
.safe_area {
  display: flex;
  justify-content: space-between;
  width: 1240px;
  min-height: 90vh;
  margin: 0 auto;
  .left {
    width: 75%;
    .whites {
      padding: 20px;
      background-color: #ffffff;
    }
    .blog_title {
      position: relative;
      margin-top: 20px;
      cursor: pointer;
      .title {
        @include font-set(32px, #222, 600, 1.3);
      }
      .info {
        @include flex-auto(center);
      }
      .user {
        width: 87%;
        height: 40px;
        margin-left: 20px;

        @include flex-auto(false, space-between, column);
        span {
          @include font-set(16px, #515151, false, 1.4);
        }
        time {
          padding-top: 6px;

          @include font-set(14px, #8a8a8a, false, 1.4);
        }
      }
      .update-text {
        position: absolute;
        top: 30px;
        right: 20px;
        font-weight: 600;
        color: #1e80ff;
        cursor: pointer;
      }
    }
    .blog_comment {
      margin: 20px 0;
      .btn {
        display: flex;
        flex-direction: row-reverse;
        width: 100%;
      }
    }
    .blog_content {
      min-height: 70vh;
      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 150px;
        .loading-text {
          padding-top: 40px;
          font-size: 18px;
          font-weight: 600;
          line-height: 2;
          color: #1e80ff;
          letter-spacing: 2px;
        }
      }
      .viewer {
        width: 100%;
        min-height: 50vh;
      }
    }
  }
  .menu {
    width: 23%;
    margin-top: 20px;
    .tree {
      width: 100%;
      min-height: 400px;
      min-height: 10vh;
      max-height: 70vh;
      padding: 20px;
      overflow-y: scroll;
      background-color: #ffffff;
      .directory {
        @include font-set(18px, #1a1a1a, 400, 1.5);
      }
      .menu_content {
        width: 100%;
        padding: 0;
        .tree_list {
          display: block;

          @include font-set(14px, #888, 400, 1.3);

          padding: 10px 0;
          cursor: pointer;
          &:hover {
            background-color: #f7f8fa;
            border-radius: 6px;
          }
        }
        .active {
          position: relative;
          color: #1e80ff;
          &::before {
            position: absolute;
            top: 50%;
            left: -17px;
            width: 5px;
            height: 20px;
            content: "";
            background: #1e80ff;
            border-radius: 0 5px 5px 0;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 6px;
  background-color: #ffffff;
}

/* 定义滚动条轨道：内阴影+圆角 */
::-webkit-scrollbar-track {
  background-color: #ffffff;
}

/* 定义滑块：内阴影+圆角 */
::-webkit-scrollbar-thumb {
  background-color: #e4e6eb;
  border-radius: 10px;
}
ul {
  list-style: none;
}
</style>
